<template>
  <div class="app-container">
		<el-form :inline="true">
				<el-form-item>
						<el-select v-model="province" placeholder="请选省" @change="handlerProvince">
										<el-option
												v-for="item in provinces"
												:key="item.value"
												:label="item.name"
												:value="item">
										</el-option>
								</el-select>
				</el-form-item>
				<el-form-item>
						<el-select v-model="city" placeholder="请选市">
								<el-option
										v-for="item in cities"
										:key="item.value"
										:label="item.name"
										:value="item.value">
								</el-option>
						</el-select>
				</el-form-item>
				<el-form-item >
						<el-input v-model="hospitalName" placeholder="医院名称"></el-input>
				</el-form-item>
				 <el-form-item>
						<el-button
								type="primary"
								icon="el-icon-search"
								@click="getList"
								style="text-align: right">
								查询
						</el-button>
				</el-form-item>
				<el-form-item>
						<el-button @click="centerDialogVisible =true">
								清空
						</el-button>
				</el-form-item>
		</el-form>
		<el-table
				:data="tableData"
				style="width: 100%"
				max-height="250"
				:row-class-name="tableRowClassName">
				<el-table-column  type="index" label="序号" width="50px"/>
				<el-table-column label="Logo" width="60px" align="center">
					<template  v-slot="{ row }">
						<img  style="height:32px" :src="'data:image/jpeg;base64,'+row.logoData"/>
					</template>
				</el-table-column>
				<el-table-column prop="hospitalName" label="医院名称"/>
				<el-table-column prop="hospitalType" label="等级"/>
				<el-table-column prop="address"  label="详细地址"/>
				<el-table-column
						class-name="status-col"
						align="center"
						label="状态  "
						width="110">
							<template v-slot="{ row }">
							<el-tag :type="row.status===0?'success':'danger'">
								{{ row.status === 0 ? "未上线" : "已上线" }}
							</el-tag>
							</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间"/>
				<el-table-column fixed="right" label="操作">
					<template v-slot="{ row }">
						<el-button icon="el-icon-s-order" @click="getDepartTree(row.hospitalCode)">
							排班
						</el-button>
					</template>	
				</el-table-column>
		</el-table>
		<div class="block">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		<el-dialog title="预约挂号" v-model="centerDialogVisible" width="90%"  center>
			<el-row>
				<el-col :span="5" style="background-color:#409eff;border-radius: 10px;">
					<i style="color:white;">科室</i>
					<el-tree :data="departList" 
						:props="defaultProps" 
						node-key="id" 
						empty-text="无数据"
						@node-click="handleNodeClick" 
						style="height:680px;width:323px; color: #6672ff;overflow: auto;"/>
				</el-col>
				<el-col :span="2" style="background-color:#409eff;border-radius: 10px">
					<i style="color:white">医生</i>
					<el-tree :data="doctorList" 
						:props="doctorProps" 
						@node-click="handleDoctor" 
						empty-text="无数据"
						style="height:680px;width:128px; color: rgb(8 49 84);overflow: auto;"/>
				</el-col>
				<el-col :span="17" style="border-radius: 10px">
					<p style="color:white;background-color:#409eff;border-radius: 10px;font-size: medium;font-style: initial;text-align: center;">预约情况</p>
					<br>
					<div style="background-color: white;">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item><el-tag :type="title===''?'danger':'success'">职位：{{title}}</el-tag></el-breadcrumb-item>
							<el-breadcrumb-item><el-tag :type="skill===''?'danger':'warning'">擅长技能：{{skill}}</el-tag></el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<el-calendar  v-model="firstDay">
						<template  #dateCell="{data}">

								<div>
									{{data.day.split('-').slice(2).join('-')}}
								</div>
								<div v-for="(item, index) in schedule" :key="index" style="text-align:center;font-size: smaller;">
									<p  v-if="data.day===item.workDate&&item.am!==null"  style="padding-top: 10px;">
										<i style="color:white;background-color:#409eff;border-radius: 5px;">上午：</i>已约
										<span style="color:red">{{item.am.reservedNumber!==null?item.am.reservedNumber:0}}</span>/剩余
										<span style="color:#41db1a">{{item.am.availableNumber!==null?item.am.availableNumber:0}}</span>
									</p>
									<p  v-if="data.day===item.workDate&&item.pm!==null">
										<i style="color:white;background-color:#409eff;border-radius: 5px;">下午：</i>已约
										<span style="color:red">{{item.pm.reservedNumber!==null?item.pm.reservedNumber:0}}</span>/剩余
										<span style="color:#41db1a">{{item.pm.availableNumber!==null?item.pm.availableNumber:0}}</span>
									</p>
							</div>
						</template>
					</el-calendar>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { fetchHosList, getDoctor, getProAndCity, getTree,getSchedule } from '/@/api/hospital';
export default defineComponent({
    name:'hospitalList',
    setup(){
			const data=reactive({
				provinces:[],
				province:<any>{},
				cities:[],
				city:'',
				hospitalName:'',
				hospitalCode:'',
			    page:1,
				limit:5,
				total:10,
				hospitalVo: <any>{},
				tableData:[],
				centerDialogVisible :false,
				defaultProps: {
					children: 'children',
					label: 'departmentName',
					id:'departmentCode'
				},
				doctorProps: {
					label: 'doctorName',
				},
				departList:{},
				doctorList:{},
				title:'',
				skill:'',
				schedule: <any>{},
				firstDay:'',
				endDay:'',
			})
			const handleSizeChange = (val:any) => {
				data.limit=val===null?1:val
			};
			const handleCurrentChange = (val:any) => {
				data.page=val===null?1:val
			};
			const  tableRowClassName=(row:any, rowIndex:number)=> {//隔行变色
					if (rowIndex === 1) {
					return 'warning-row';
					} else if (rowIndex === 3) {
					return 'success-row';
					}
					return '';
			}
			const proAndCity=(dictoryCode:string,value:string)=>{
				//debugger
					getProAndCity(dictoryCode,value).then((result:any)=>{
					if (result.code === 200) {
							if(value==='none')
								data.provinces=result.data
							if(dictoryCode==='none')
								data.cities=result.data
					}
					}) .catch((error) => {
						console.log(error)
					})
			}
			const handlerProvince=(val:any)=>{
				proAndCity('none',val.id)
			}
			const getList=()=>{
				if(data.city===''&&data.province.id!==undefined){
					data.hospitalVo.provinceCode=data.province.id
				}else if(data.city!==''){
					data.hospitalVo.cityCode=data.city
				}
				data.hospitalVo.hospitalName=data.hospitalName
				fetchHosList(
					data.page,
					data.limit,
					data.hospitalVo
				).then((result:any)=>{
					if(result.code===200){
						data.tableData=result.data.content
						data.total=result.data.total
					}
				}) .catch((error) => {
					console.log(error)
				})
			}
			const getDepartTree=(hospitalCode:string)=>{
				data.centerDialogVisible=true
				data.hospitalCode=hospitalCode
				data.schedule= <any>{},
				getTree(hospitalCode).then((result:any)=>{
					if(result.code===200){
						data.departList=result.data
					}
				}) .catch((error) => {
						console.log(error)
				})
			}
			const handleNodeClick=(val:any)=>{
				getDoctor(data.hospitalCode,val.departmentCode).then((result:any)=>{
					if(result.code===200){
						data.doctorList=result.data
					}
				}) .catch((error) => {
						console.log(error)
				})
			}
			const handleDoctor=(val:any)=>{
				data.title=val.title
				data.skill=val.skill
				getSchedule(val.hospitalCode,val.departmentCode,val.doctorName).then((result:any)=>{
					if(result.code===200){
						data.schedule=result.data.scheduleVos
						data.firstDay=result.data.first_day_of_week
						data.endDay=result.data.last_day_of_week
					}
				}) .catch((error) => {
						console.log(error)
				})
			}
			onMounted(()=>{
				proAndCity('PROVINCE','none')
				getList()
			})
			return {
				...toRefs(data),
				tableRowClassName,
				handlerProvince,
				handleSizeChange,
				handleCurrentChange,
				getList,
				handleNodeClick,
				getDepartTree,
				handleDoctor
			}
    }
})
</script>
<style>
.el-tree-node:focus>.el-tree-node__content {
    background-color: #cc752f;
}
</style>